<template>
  <div style="margin-top: 20px;">
    <div v-if="logistics.success">
      <el-row :gutter="20" v-for="(item, index) in logistics.result" :key="index">
        <el-col :span="4">
          <span>快递公司：{{item.logisticsCompanyName}}</span>
        </el-col>
        <el-col :span="4">
          <span>快递单号：{{item.logisticsBillNo}}</span>
        </el-col>
        <el-col :span="8">
          <span>
            收件：
            <br />
            位置：{{item.receiver.receiverProvince + item.receiver.receiverCity + item.receiver.receiverCounty + item.receiver.receiverAddress}}
            <br />
            收件人：{{item.receiver.receiverName}}
            <br />
            电话：{{item.receiver.receiverMobile}}
          </span>
        </el-col>
        <el-col :span="8">
          <span>
            发件：
            <br />
            位置：{{item.sender.senderProvince + item.sender.senderCity + item.sender.senderCounty + item.sender.senderAddress }}
            <br />
            发件人：{{item.sender.senderName}}
            <br />
            电话：{{item.sender.senderMobile}}
          </span>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col>
          <el-steps
            direction="vertical"
            v-for="(item, index) in logisticsStream.logisticsTrace"
            :key="index"
            :active="item.logisticsSteps.length -1 "
          >
            <el-step
              v-for="(i, ind) in item.logisticsSteps"
              :key="ind"
              :title="i.remark + i.acceptTime"
            ></el-step>
          </el-steps>
        </el-col>
      </el-row>
    </div>

    <div v-if="!logistics.success">
      <el-steps direction="vertical" :active="1">
        <el-step :title="logistics.errorMessage"></el-step>
      </el-steps>
    </div>
  </div>
</template>

<script>
export default {
  name: "showOrder",
  data() {
    return { logistics: {}, logisticsStream: {} };
  },
  methods: {
    async getLogistics() {
      await this.$http
        .post(
          `/ali-order/1688/get-logisticsInfo/${this.$route.params.id}`
        )
        .then((res) => {
          let result = JSON.parse(res.data.message);
          this.logistics = result;
          if (result.success) {
            this.$http
              .post(
                `/ali-order/1688/get-logisticsInfo-stream/${this.$route.params.id}`
              )
              .then((response) => {
                let result1 = JSON.parse(response.data.message);
                console.log(result1);
                this.logisticsStream = result1;
              })
              .catch((err) => {});
          }
        })
        .catch((err) => {});
    },
  },
  created() {
    this.getLogistics();
  },
};
</script>
